// 容器块title
<template>
<div class="block-header">

    <h2 class="title">
        {{title}}
    </h2>

    <slot></slot>

</div>
</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

@Component({})
export default class blockHeader extends Vue{
    name:string = 'block-header'

    @Prop()
    title:string

}

</script>

<style scoped lang='scss'>

.block-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    

    .title{
        position: relative;
        margin-bottom: _rem(10px);
        padding-left: _rem(4px);
        font-size: $font_small;

        &::before{
            content: '';
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;

            margin: auto;
            width: _rem(2px);
            height: 50%;
            border-radius: $border_radius;
            background: $main_color;
            
        }
    }
}

</style>